<template>
    <div class="user-login-page">
        <div class="container">
            <div class="title">用户登录</div>
            <a-form-model class="content">
                <a-form-model-item>
                    <a-input placeholder="请输入用户名">
                        <a-icon slot="prefix" type="user" />
                    </a-input>
                </a-form-model-item>
                <a-form-model-item>
                    <a-input placeholder="请输入密码">
                        <a-icon slot="prefix" type="lock" />
                    </a-input>
                </a-form-model-item>
                <a-button block>登录</a-button>
            </a-form-model>
        </div>
    </div>
</template>
<style lang="less">
.user-login-page {
    height: 100vh;
    background-image: url("../../assets/images/bg.png");
    background-size: 100% 100%;
    position: relative;
    .container {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 15vw;
        right: 15%;
        min-width: 300px;
        .title {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
        }
    }
    .ant-input {
        border-radius: 16px !important;
    }
    .ant-btn {
        border-radius: 16px !important;
        background-image: linear-gradient(180deg, #2ee1d8, #2f9be6) !important;
        color: #fff !important;
    }
}
</style>
